<template>
  <view>
    <searchBox></searchBox>

    <Tabs :tabs="tabs" @myEven="changesIndex">

      <block v-if="tabs[0].isActive">
        <view class="first_tab">
          <navigator :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`" class="goods_item"
            v-for="item in GoodsList" :key="item.goods_id">
            <view class="goods_img_wrap">
              <image :src="item.goods_small_logo" mode="widthFix" />
            </view>
            <view class="goods_info_wrap">
              <view class="goods_name">{{item.goods_name}}</view>
              <view class="goods_price">￥{{item.goods_price}}</view>
            </view>
          </navigator>

        </view>
      </block>
      <block v-else-if="tabs[1].isActive">122222</block>
      <block v-else-if="tabs[2].isActive">2</block>
    </Tabs>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import searchBox from "../../components/searchBox/searchBox.vue";
import Tabs from "../../components/Tabs/Tabs.vue";
export default {
  components: {
    searchBox,
    Tabs,
  },
  data() {
    return {
      QueryParams: {
        query: "",
        cid: "",
        pagenum: 1,
        pagesize: 10,
      },
      GoodsList: [],
      totalPages: 1,
      tabs: [
        {
          id: 0,
          value: "综合",
          isActive: true,
        },
        {
          id: 1,
          value: "销量",
          isActive: false,
        },
        {
          id: 3,
          value: "价格",
          isActive: false,
        },
      ],
    };
  },
  onLoad(option) {
    console.log(option, "参数");
    this.QueryParams.cid = option.cid || "";
    this.QueryParams.query = option.query || "";
    this.getGoodsList();
  },

  methods: {
    async getGoodsList() {
      const res = await request("/goods/search", this.QueryParams);
      if (res.meta.status !== 200) {
        uni.showToast({
          title: "数据请求失败",
        });
      } else {
        this.GoodsList = [...this.GoodsList, ...res.message.goods];
        const total = res.message.total;
        this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
        // console.log(this.totalPages, "this.totalPages");
        // 关闭刷新
        uni.stopPullDownRefresh();
        res.message.goods.map((v) => {
          if (v.goods_small_logo === "") {
            return (v.goods_small_logo =
              "https://img1.baidu.com/it/u=3597708867,4007175396&fm=26&fmt=auto");
          }
        });
      }
    },
    changesIndex(e) {
      this.tabs.forEach((item, i) =>
        i === e ? (item.isActive = true) : (item.isActive = false)
      );
    },
  },
  onPullDownRefresh() {
    this.GoodsList = [];
    this.QueryParams.pagenum = 1;
    this.getGoodsList();
  },
  onReachBottom() {
    if (this.QueryParams.pagenum >= this.totalPages) {
      uni.showToast({
        title: "没有下一页数据",
        duration: 2000,
      });
    } else {
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }
  },
};
</script>

<style lang="less">
.first_tab {
  .goods_item {
    border-bottom: 1px solid #ccc;
    display: flex;
    .goods_img_wrap {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 70%;
      }
    }
    .goods_info_wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 3;
      .goods_name {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .goods_price {
        color: red;
        font-size: 32rpx;
      }
    }
  }
}
</style>
